<template>
  <div class="add-btn">
    <el-dialog title="小程序用户" :visible.sync="dialogVisible" width="700px" :append-to-body="true" @close="closeAddDialog">
      <!-- 列表开始 -->
      <el-table :data="appletUserInfo" border size="mini" style="width: 100%">
        <el-table-column align="center" label="序号" type="index" width="50" height="30">
        </el-table-column>
        <el-table-column align="center" prop="nickName" label="微信昵称">
        </el-table-column>
        <el-table-column align="center" prop="avatar" label="微信头像" width="100">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar" :fit="fit" :size="40" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="更新时间">
        </el-table-column>
        <el-table-column prop="management" label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button @click="deleteClick(scope.row.id)" type="danger" size="mini" plain>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    reqRemoveWxUser
  } from "../../../api/api-user";
  export default {
    name: "appletUser",
    props: ["appletUserInfo", "appletUserId"],
    data() {
      return {
        fit: "cover",
        dialogVisible: false, //弹框是否显示
      };
    },
    methods: {
      // 删除小程序用户
      async deleteClick(id) {
        const result = await this.$confirm(
          "此操作将删除该小程序用户, 是否继续?",
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch(() => {});
        if (result !== "confirm") return;
        const res = await reqRemoveWxUser(id);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         this.$modal.notifySuccess("删除小程序用户成功");
        this.$parent.miniProgramClick(this.appletUserId);
      },
      // 点击关闭按钮
      closeAddDialog() {
        this.dialogVisible = false;
      },
      // 图片加载失败的 fallback 行为
      errorHandler() {
        return true;
      },
    },
  };
</script>

<style lang="less" scoped>
  @import url("../../common.less");
</style>